import { FC , useState, useEffect } from "react";


const Effect2th: FC<{}> = ()=>{
    let [data,setData] = useState<Array<any>>([])
    let [flag, setFlag] = useState<boolean>(false)
    //异步请求 属于副作用
    //useEffect的第二个参数叫做 依赖项
    //第二个参数添加空数组 空依赖 那么可以当成componentDidMount来使用
    useEffect(()=>{
        fetch('http://chst.vip/data/index.json')
        .then(body => body.json())
        .then(res =>{
            console.log(res);
            setData(res.data)
        })

    },[flag]) //flag发生变化 useEffect中的回调函数就会重新执行

    //不同的副效应逻辑 不应该只放在一个effect 应该放到多个effect里面
    useEffect(()=>{
        document.getElementById('l')!.style.color='deepskyblue'

    })

    let lis = data.map((item:any) => {
        return(
            <li key={item.id} >{item.title}</li>
        )
    })

    const handleClick = ()=>{
        setFlag(!flag)
    }

    return(
        <fieldset>
            <legend id='l' >effect第二个参数</legend>
            <ul>
               {lis}
            </ul>

            <button onClick={handleClick} >重新发送请求</button>
        </fieldset>
    )
}

export default Effect2th

